<template>
  <customContainer ref="customContainerRef" :config="config" />
  <setForm
    ref="setFormRef"
    v-model:open="open"
    v-model:title="title"
    @changeList="handleQuery"
  />
</template>
<script lang="ts" setup>
import {
  Delete,
  Plus,
  Edit,
} from '@element-plus/icons-vue'
import { ref, getCurrentInstance, defineAsyncComponent, computed } from 'vue'
import { ElMessage, ElMessageBox, ElButton } from 'element-plus'
import { useI18n } from 'vue-i18n'
import usedicts, { DictDirection } from '@/store/modules/dicts'
import { getOrderPrintList, addOrderPrint, updateOrderPrint, delOrderPrint } from '@/api/system/singleAccount'

const { t } = useI18n()
const dicts = usedicts()
const setForm = defineAsyncComponent(() => import('./components/setForm.vue'))
let // 查询参数
  queryParams = ref({
    pageNum: 1,
    pageSize: 10,
  }),
  // 选中数组
  ids = [],
  // 非单个禁用
  single = ref(true),
  // 非多个禁用
  multiple = ref(true),
  //
  customContainerRef = ref(null),
  // 新增账户
  setFormRef = ref(null),
  open = ref(false),
  title = ref('')
// 查询
const handleQuery = () => {
  queryParams.value.pageNum = 1
  customContainerRef.value.getList()
}
// 多选框选中数据
const handleSelectionChange = (rows: { [key: string]: any }[]) => {
  ids = rows.map((item) => item.id)
  single.value = rows.length != 1
  multiple.value = !rows.length
}
/** 新增按钮操作 */
const handleAdd = () => {
  open.value = true
  title.value = '添加账户'
}
/** 修改按钮操作 */
const handleUpdate = (row: { [key: string]: any }) => {
  open.value = true
  title.value = '修改账户'
  const rowList = JSON.parse(JSON.stringify(row))
  setFormRef.value.form = rowList
}
/** 删除按钮操作 */
const handleDelete = (row: { [key: string]: any }) => {
  const id = row.id || ids
  ElMessageBox.confirm(
    `"是否确认删除id为"${ id }"的数据项?"`,
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    },
  )
  .then(() => delOrderPrint(id))
  .then((res) => {
    if (res.code === 200) {
      handleQuery()
      ElMessage.success('删除成功')
    } else {
      ElMessage.error(res.msg)
    }
  })
  .catch((error) => {
    if (error == 'cancel') {
      ElMessage.info(error)
    }
  })
}
const config = computed(() => {
  const queryFields = 'system.eillingAccount.queryField.'
  const btns = 'system.eillingAccount.btns.'
  const columns = 'system.eillingAccount.columns.'
  return {
    query: {
      fields: [
        {
          label: t(`${ queryFields }meterNumber`),
          prop: 'meterNumber',
          option: {
            placeholder: '请输入账号',
          },
        },
        {
          label: t(`${ queryFields }printCode`),
          prop: 'printCode',
          option: {
            placeholder: '请输入账号名称',
          },
        },
        {
          label: t(`${ queryFields }status`),
          prop: 'status',
          type: 'select',
          option: {
            placeholder: '请输入账号状态',
            dictInfo: {
              dict: DictDirection.账户状态,
            },
          },
        },
      ],
      queryParams: queryParams.value,
    },
    btns: [
      {
        title: t(`${ btns }add`),
        icon: Plus,
        onClick: handleAdd,
      },
      {
        title: t(`${ btns }edit`),
        icon: Edit,
        type: 'warning',
        onClick: handleUpdate,
        disabled: single.value,
      },
      {
        title: t(`${ btns }delete`),
        icon: Delete,
        type: 'danger',
        onClick: handleDelete,
        disabled: multiple.value,
      },
    ],
    table: {
      columns: [
        { type: 'selection', width: '55', align: 'center' },
        {
          label: t(`${ columns }id`),
          prop: 'id',
          align: 'center',
          width: '90',
        },
        {
          label: t(`${ columns }meterNumber`),
          prop: 'meterNumber',
          align: 'center',
          width: '90',
        },
        {
          label: t(`${ columns }printCode`),
          prop: 'printCode',
          align: 'center',
          width: '90',
       
        },
        {
          label: t(`${ columns }accountType`),
          prop: 'accountType',
          align: 'center',
          width: '90',
      
        },
        {
          label: t(`${ columns }accountKey`),
          prop: 'accountKey',
          align: 'center',
          width: '90',
     
        },
        {
          label: t(`${ columns }password`),
          prop: 'password',
          align: 'center',
          width: '90',
         
        },
        {
          label: t(`${ columns }accountNumber`),
          prop: 'accountNumber',
          align: 'center',
          width: '90',
        },
        {
          label: t(`${ columns }shipperAddressId`),
          prop: 'shipperAddressId',
          align: 'center',
          width: '90',
          formatter: (row) => dicts.getDictLabel({ dict: DictDirection.发货人地址, value: row.shipperAddressId }),
        },
        {
          label: t(`${ columns }serviceProviderId`),
          prop: 'serviceProviderId',
          align: 'center',
          width: '90',
          formatter: (row) => dicts.getDictLabel({ dict: DictDirection.服务渠道, value: row.serviceProviderId }),
        },
        {
          label: t(`${ columns }status`),
          prop: 'status',
          align: 'center',
          width: '90',
          formatter: (row) => dicts.getDictLabel({ dict: DictDirection.账户状态, value: row.status }),
        },
        {
          label: t(`${ columns }remark`),
          prop: 'remark',
          align: 'center',
          width: '90',
        },
        {
          label: t(`${ columns }operation`),
          align: 'center',
          showOverflowTooltip: false,
          render: (h, params) => {
            const buttons = [
              {
                title: t(`${ btns }edit`),
                icon: Edit,
                clickFun: handleUpdate,
              },
              {
                title: t(`${ btns }delete`),
                icon: Delete,
                clickFun: handleDelete,
              },
            ]
            return buttons.map((el) => h(
              ElButton,
              {
                text: true,
                type: 'primary',
                icon: el.icon,
                onClick: () => {
                  el.clickFun(params.row)
                },
              },
              {
                default: () => el.title,
              },
            ))
          },
        },
      ],
      event: {
        onSelectionChange: (rows) => {
          handleSelectionChange(rows)
        },
      },
    },
    api: getOrderPrintList,
    customKey: 'system/orderPrint',
  }
})
</script>
